import {createApp} from 'vue'
import './style.scss'
import router from "./router"
import store from "./store"
import App from './App.vue'
import HeaderMenu from "@/components/HeaderMenu.vue";
import FotterMessage from "@/components/FotterMessage.vue";
import ViewUIPlus from 'view-ui-plus'
import 'view-ui-plus/dist/styles/viewuiplus.css'
import '@/my-theme/index.less';
import Lazyload from "vue3-lazyload";
import errorImg from "@/static/lazyload/error.jpg"
import loadingImg from "@/static/lazyload/loading.gif"
import { globalMixin } from "@/plugins/mixin.ts"

interface viewTypes {
    Copy?:any;
}

function getTextLines(element:HTMLElement) {
    // 获取元素内文字有多少行
    const computedStyle = getComputedStyle(element);
    const lineHeight = parseInt(computedStyle.lineHeight);
    const containerHeight = parseInt(computedStyle.height);
    const textHeight = element.scrollHeight;
    return Math.ceil(containerHeight / lineHeight);
}


const app = createApp(App);
app.component('HeaderMenu', HeaderMenu)
app.component('FotterMessage', FotterMessage)
app.directive("code", {
    mounted(element: any) {
        // 子集下的所有代码块
        let children = element.querySelectorAll("pre.ql-syntax");
        children.forEach((item: any) => {
            var parent = item.parentNode;
            let codeDiv = document.createElement("div");
            let codeHeader = document.createElement("div");
            let dic = document.createElement("div");
            let copyDiv = document.createElement("div");
            let codeMain = document.createElement("div");
            let codeNum = document.createElement("div");
            codeNum.setAttribute("class", "codeNum");
            // 获取有多少行 每行添加一个数字
            let text = "1\n";
            for(let i = 2;i <= getTextLines(item);i++) {
                text += i + "\n"
            }
            codeNum.innerText = text;
            codeMain.setAttribute("class", "codeMain");
            copyDiv.setAttribute("class", "copyDiv");
            copyDiv.innerText = "复制"
            copyDiv.onclick = () => {
                // 复制代码
                (ViewUIPlus as viewTypes).Copy({
                    text: item.innerText
                })
            }
            dic.setAttribute("class", "dic");
            let dic2 = dic.cloneNode(true);
            let dic3 = dic.cloneNode(true);
            codeHeader.setAttribute("class", "codeHeader");
            codeHeader.appendChild(dic);
            codeHeader.appendChild(dic2);
            codeHeader.appendChild(dic3);
            codeHeader.appendChild(copyDiv);
            codeDiv.setAttribute("class", "codeDiv");
            codeDiv.appendChild(codeHeader)
            codeDiv.appendChild(codeMain)
            parent.replaceChild(codeDiv, item);
            codeMain.appendChild(codeNum);
            codeMain.appendChild(item);
        })
    }
})


app.use(router).mixin(globalMixin)
    .use(store)
    .use(ViewUIPlus)
    .use(Lazyload, {
        loading: loadingImg,//可以指定加载中的图像
        error: errorImg,//可以指定加载失败的图像
    })
    .mount('#app')

